<template>
  <div>
     <!-- <el-button size="small" type="primary" @click="selectFile">点击上传</el-button> -->
     <div v-if="progressList.length == 0" @click="selectFile" class="imgBox">
       <i class="el-icon-plus"></i>
     </div>
     <input :ref="refName" 
     @change="inputChange"
     multiple="multiple"
     type="file" style="display:none;" :accept='accept.join()'>
     <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->

     <div v-for="item in progressList" class="file-item" :key="item.taskId">
        <!-- <div class="file-name">{{item.fileName}}</div> -->
        <!-- <div class="file-speed">{{item.speed}}</div> -->
        <!-- <div class="file-percent">{{item.percent}}%</div> -->
        <!-- <div class="file-pro">
          <el-progress :percentage="item.percent" :show-text="true"></el-progress>
          <el-button 
          @click="removeFile(item)"
         
          class="file-close" type="text" icon="el-icon-close"></el-button>
        </div> -->
        <div @click="selectFile" class="imgBox">
            <img :src="item.url" alt="">
        </div>
     </div>

     <!-- <el-button size="small" type="primary" @click="getFileList">获取文件</el-button> -->
  </div>
</template>
<script>
import COS from '@/util/COS'
export default {
  props: {
    accept: {
      type: Array,
      default: () => []
    },
    fileSize: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      refName: Math.random() + '_cosFileInput',
      progressList: []
    }
  },
  methods: {
    selectFile () {
      this.$refs[this.refName].click()
    },
    inputChange () {
      this.progressList = []
      var files = this.$refs[this.refName].files
      this.checkAccept(files)
      for (let file of files) {
        if (this.isFileSize(file)) {
          if (this.isAccept(file)) {
            COS.sliceUploadFile(file, this.progress, this.complete)
          } 
        }
       }
      this.$refs[this.refName].value = ''
    },
    progress (info) {
      var index = -1
      for (let i = 0; i < this.progressList.length; i++) {
        let item = this.progressList[i]
        if (item.taskId == info.taskId) {
          index = i
        }
      }
      if (index > -1) {
        this.progressList.splice(index, 1, info)
      } else {
        this.progressList.push(info)
      }
    },
    removeFile (item) {
      COS.cancelTask(item.taskId)
      for (let i = 0; i < this.progressList.length; i++) {
        let temp = this.progressList[i]
        if (item.taskId == temp.taskId) {
          this.progressList.splice(i, 1)
        }
      }
    },
    complete (data) {
      for (let i = 0; i < this.progressList.length; i++) {
        let item = this.progressList[i]
        if (item.taskId == data.taskId) {
          item.url = data.Location
        }
      }
      this.getFileList()
    },
    getFileList () {
      var list = []
      for (let item of this.progressList) {
        if (item.url) {
          if (/^http/.test(item.url)) {
                item.url = item.url
           } else {
                item.url = 'https://' + item.url
           }
           list.push(item)
        }
      }
      this.progressList = list
      return list
    },
    isAccept (file) {
      if (this.accept.length == 0) {
        return true
      }
       var suffix = file.name.substring(file.name.lastIndexOf('.'))
      let flag = false
      for (let item of this.accept) {
        if (suffix.toUpperCase() == item.toUpperCase()) {
          flag = true
        }
      }
      return flag
    },
    isFileSize  (item) {
      if (item.size > this.fileSize.size) {
          this.clearFile()
          this.$message.error(this.fileSize.messge)
          return false
        } else {
          return true
        }
    },
    checkAccept (files) {
        for (let item of files) {
          if (!this.isAccept(item)) {
            this.$message.error('只能上传' + this.accept.join(' ') + '文件')
            break
          }
        }
    },
    clearFile () {
      this.progressList = []
    }
  },
  mounted () {
    this.$emit('complete')
  }
}
</script>
<style lang='less' scoped>
.file-item{display: inline-block;}
.file-name{width: 90%;display: inline-block;vertical-align: middle;overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;}
.file-speed{width: 30%;display: inline-block;vertical-align: middle;}
.file-percent{width: 30%;display: inline-block;vertical-align: middle;}
.file-pro{width: 90%;position: relative;padding: 10px 0 0 0;}
.file-close{position: absolute;right: -30px; top:0px;padding: 10px;}
.imgBox{
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #efefef;
  text-align: center;
  float: left;
  font-size: 30px;
  margin-right: 10px;
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
